<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食谱智能推荐</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: url('a.jpg') no-repeat center center fixed;
            background-size: cover;
            color: #333;
            padding: 20px;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .question {
            margin-bottom: 20px;
        }
        .options label {
            display: block;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }
        button:hover {
            background-color: #218838;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #ddd;
            display: none;
        }
        .loading {
            display: none;
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>智能食谱问卷</h1>
        <form id="recipeQuiz">
            <div class="question">
                <h3>1. 您平时主要的饮食偏好是？</h3>
                <div class="options">
                    <label><input type="radio" name="q1" value="无肉不欢"> 无肉不欢，偏好各类畜禽肉</label>
                    <label><input type="radio" name="q1" value="喜欢海鲜"> 喜欢吃鱼、虾等海鲜</label>
                    <label><input type="radio" name="q1" value="素食主义"> 素食主义，以蔬菜、豆制品为主</label>
                    <label><input type="radio" name="q1" value="均衡饮食"> 各类食材均衡摄入，没有特别偏好</label>
                </div>
            </div>

            <div class="question">
                <h3>2. 您今天可用于烹饪的时间大概是？</h3>
                <div class="options">
                    <label><input type="radio" name="q2" value="15分钟以内"> 15 分钟以内</label>
                    <label><input type="radio" name="q2" value="15-30分钟"> 15 - 30 分钟</label>
                    <label><input type="radio" name="q2" value="30-60分钟"> 30 - 60 分钟</label>
                    <label><input type="radio" name="q2" value="1小时以上"> 1 小时以上</label>
                </div>
            </div>

            <div class="question">
                <h3>3. 您有需要规避的食材吗？（可多选）</h3>
                <div class="options">
                    <label><input type="checkbox" name="q3" value="麸质"> 麸质（小麦 / 大麦）</label>
                    <label><input type="checkbox" name="q3" value="乳制品"> 乳制品</label>
                    <label><input type="checkbox" name="q3" value="海鲜"> 海鲜</label>
                    <label><input type="checkbox" name="q3" value="坚果"> 坚果</label>
                    <label><input type="checkbox" name="q3" value="无特殊禁忌"> 无特殊禁忌</label>
                </div>
            </div>

            <div class="question">
                <h3>4. 您希望通过今天的饮食达到什么目的？</h3>
                <div class="options">
                    <label><input type="radio" name="q4" value="增肌塑形"> 补充蛋白质，增肌塑形</label>
                    <label><input type="radio" name="q4" value="减脂瘦身"> 控制热量，减脂瘦身</label>
                    <label><input type="radio" name="q4" value="增强免疫力"> 补充维生素、矿物质，增强免疫力</label>
                    <label><input type="radio" name="q4" value="享受美食"> 只是单纯想吃美味的食物，没有特殊目的</label>
                </div>
            </div>

            <div class="question">
                <h3>5. 今天是几人用餐？</h3>
                <div class="options">
                    <label><input type="radio" name="q5" value="1人"> 1 人</label>
                    <label><input type="radio" name="q5" value="2-3人"> 2 - 3 人</label>
                    <label><input type="radio" name="q5" value="4-6人"> 4 - 6 人</label>
                    <label><input type="radio" name="q5" value="6人以上"> 6 人以上</label>
                </div>
            </div>

            <div class="question">
                <h3>6. 您喜欢的口味是？</h3>
                <div class="options">
                    <label><input type="radio" name="q6" value="重口味"> 重口味，如麻辣、香辣</label>
                    <label><input type="radio" name="q6" value="清淡口味"> 清淡口味，偏好原汁原味</label>
                    <label><input type="radio" name="q6" value="酸甜口味"> 酸甜口味</label>
                    <label><input type="radio" name="q6" value="咸鲜口味"> 咸鲜口味</label>
                </div>
            </div>

            <div class="question">
                <h3>7. 您是否有特殊的饮食限制？</h3>
                <div class="options">
                    <label><input type="radio" name="q7" value="糖尿病"> 糖尿病，需低糖饮食</label>
                    <label><input type="radio" name="q7" value="高血压"> 高血压，需低盐饮食</label>
                    <label><input type="radio" name="q7" value="痛风"> 痛风，需低嘌呤饮食</label>
                    <label><input type="radio" name="q7" value="无特殊限制"> 没有特殊饮食限制</label>
                </div>
            </div>

            <div class="question">
                <h3>8. 您今天的心情如何？</h3>
                <div class="options">
                    <label><input type="radio" name="q8" value="心情很好"> 心情很好，想吃点丰富的美食庆祝</label>
                    <label><input type="radio" name="q8" value="心情一般"> 心情一般，想吃点简单可口的食物</label>
                    <label><input type="radio" name="q8" value="心情不佳"> 心情不佳，想吃点治愈系的食物</label>
                    <label><input type="radio" name="q8" value="心情平静"> 心情很平静，对食物没有特别期待</label>
                </div>
            </div>

            <div class="question">
                <h3>9. 您是否喜欢尝试新的菜品和烹饪方式？</h3>
                <div class="options">
                    <label><input type="radio" name="q9" value="非常喜欢"> 非常喜欢，经常尝试新花样</label>
                    <label><input type="radio" name="q9" value="比较喜欢"> 比较喜欢，但不会频繁尝试</label>
                    <label><input type="radio" name="q9" value="一般"> 一般，更喜欢传统常见的菜品</label>
                    <label><input type="radio" name="q9" value="不太喜欢"> 不太喜欢，只吃熟悉的食物</label>
                </div>
            </div>

            <button type="button" onclick="submitQuiz()">提交</button>
        </form>

        <div class="loading" id="loading">AI 正在分析您的答案，请稍等...</div>

        <div class="result" id="result">
            <h3>AI 推荐的食谱：</h3>
            <p id="aiAnswer"></p>
        </div>

        <h3>串口连接</h3>
        <button onclick="listSerialPorts()">获取串口</button>
        <select id="portSelect"></select>
        <button onclick="connectSelectedPort()">连接串口</button>
    </div>

    <script>
        let port;
        let portList = [];
        
        // 获取选中的单选按钮的值
        function getSelectedAnswer(name) {
            const selected = document.querySelector(`input[name="${name}"]:checked`);
            return selected ? selected.value : "";
        }
        
        // 获取串口列表
        async function listSerialPorts() {
            try {
                if (!("serial" in navigator)) {
                    alert("您的浏览器不支持 Web Serial API，请使用 Chrome 89+ 或 Edge 89+！");
                    return;
                }
        
                // 请求用户选择串口
                const newPort = await navigator.serial.requestPort();
                portList.push(newPort);
                updatePortDropdown();
            } catch (error) {
                console.error("串口选择失败:", error);
            }
        }
        
        // 更新串口选择下拉框
        function updatePortDropdown() {
            const select = document.getElementById("portSelect");
            select.innerHTML = "";
            portList.forEach((p, index) => {
                const option = document.createElement("option");
                option.value = index;
                option.textContent = `串口 ${index + 1}`;
                select.appendChild(option);
            });
        }
        
        // 连接选中的串口
        async function connectSelectedPort() {
            const select = document.getElementById("portSelect");
            const selectedIndex = select.value;
            if (selectedIndex === "") {
                alert("请选择一个串口！");
                return;
            }
            port = portList[selectedIndex];
        
            try {
                await port.open({ baudRate: 115200 });
                console.log("串口已连接:", port);
                alert("串口连接成功！");
            } catch (error) {
                console.error("串口连接失败:", error);
                alert("连接失败，请检查设备");
            }
        }
        
        // 发送数据到串口
        async function sendToSerial(data) {
            if (!port) {
                alert("请先连接串口！");
                return;
            }
            const writer = port.writable.getWriter();
            const encoder = new TextEncoder();
            await writer.write(encoder.encode(data + "\n"));
            writer.releaseLock();
            console.log("已发送:", data);
        }
        
        async function submitQuiz() {
            const answers = {
                "1. 您平时主要的饮食偏好？": getSelectedAnswer("q1"),
                "2. 您今天可用于烹饪的时间？": getSelectedAnswer("q2")
            };
        
            if (!answers["1. 您平时主要的饮食偏好？"] || !answers["2. 您今天可用于烹饪的时间？"]) {
                alert("请完整填写问卷！");
                return;
            }
        
            const formattedQuestionnaire = Object.entries(answers)
                .map(([question, answer]) => `${question} ${answer}`)
                .join("\n");
        
            document.getElementById('loading').style.display = "block";
        
            try {
                const response = await fetch('http://localhost:3000/ask', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        question: `请分析以下问卷，并提供每天每餐，菜谱名字和所需要食材建议（100字以内）：\n\n${formattedQuestionnaire}`
                    }),
                });
        
                if (!response.ok) throw new Error('服务器返回错误');
        
                const data = await response.json();
                document.getElementById('loading').style.display = "none";
                document.getElementById('result').style.display = "block";
                document.getElementById('aiAnswer').innerHTML = data.answer.replace(/\n/g, "<br>");
        
                // 发送 AI 返回的数据到串口
                await sendToSerial(data.answer);
            } catch (error) {
                console.error('提交失败:', error);
                alert('提交失败，请稍后再试');
                document.getElementById('loading').style.display = "none";
            }
        }
    </script>
</body>
</html>
